<template>
  <a-modal
    :title="formTile + '模版'"
    :visible="true"
    width="80%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card>
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <a-form
              :form="form"
              @submit="handleSubmit"
              :labelCol="formItemLayout.labelCol"
              :wrapperCol="formItemLayout.wrapperCol"
            >
              <a-form-item
                label="模板名称"
                :required="true"
              >
                <a-input
                  allow-clear
                  placeholder="请输入模板名称"
                  :maxLength="40"
                  v-decorator="[
                  `name`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入模板名称'
                      }
                    ]
                  }
                ]"
                />
              </a-form-item>
              <a-form-item
                label="角色"
                :required="true"
              >
                <a-select
                  allow-clear
                  show-search
                  placeholder="请选择角色"
                  optionFilterProp="children"
                  v-decorator="[
                  'roleId',
                  {
                    rules: [{ required: true, message: '请选择角色!' }]
                  }
                ]"
                >
                  <a-select-option
                    :value="item.id"
                    v-for="item in roleList"
                    :key="item.id"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item
                label="品牌"
                :required="true"
              >
                <a-select
                  allow-clear
                   mode="multiple"
                  show-search
                  placeholder="请选择品牌"
                  optionFilterProp="children"
                  v-decorator="[
                  'brandList',
                  {
                    rules: [{ required: true, message: '请选择品牌!' }]
                  }
                ]"
                >
                  <a-select-option
                    :value="item"
                    v-for="item in brandList"
                    :key="item"
                  >
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item
                label="货季"
                :required="true"
              >
                <!-- <a-select
                  allow-clear
                  show-search
                  placeholder="请选择货季"
                  optionFilterProp="children"
                  v-decorator="[
                  'goodsSeason',
                  {
                    rules: [{ required: true, message: '请选择货季!' }]
                  }
                ]"
                >
                  <a-select-option
                    :value="item"
                    v-for="item in seasonList"
                    :key="item"
                  >
                    {{ item }}
                  </a-select-option>
                </a-select> -->
                <a-select
                  mode="multiple"
                  allow-clear
                  placeholder="请选择货季"
                  v-decorator="[
                  'goodsSeason',
                  {
                    rules: [{ required: true, message: '请选择货季!' }]
                  }
                ]"
                >
                  <a-select-option
                    :value="item"
                    v-for="item in seasonList"
                    :key="item"
                  >
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-item>

              <a-table
                bordered
                :loading="loading"
                :pagination="false"
                :columns="columns"
                :data-source="fieldConfigList"
                :scroll="{ x: true }"
              >
                <template
                  slot="main"
                  slot-scope="txt, record"
                >
                  <div style="text-align: center;">
                    <a-switch
                      :default-checked="record.mainPage==1"
                      @change="choose(record, $event ? ischoose : noChoose,1)"
                    >
                      <a-icon
                        slot="checkedChildren"
                        type="check"
                      />
                      <a-icon
                        slot="unCheckedChildren"
                        type="close"
                      />
                    </a-switch>
                  </div>
                </template>
                <template
                  slot="detail"
                  slot-scope="txt, record"
                >
                  <div style="text-align: center;">
                    <a-switch
                      :default-checked="record.detailPage==1"
                      @change="choose(record, $event ? ischoose : noChoose,2)"
                    >
                      <a-icon
                        slot="checkedChildren"
                        type="check"
                      />
                      <a-icon
                        slot="unCheckedChildren"
                        type="close"
                      />
                    </a-switch>
                  </div>
                </template>
                <template
                  slot="print"
                  slot-scope="txt, record"
                >
                  <div style="text-align: center;">
                    <a-switch
                      :default-checked="record.printPage==1"
                      @change="choose(record, $event ? ischoose : noChoose,3)"
                    >
                      <a-icon
                        slot="checkedChildren"
                        type="check"
                      />
                      <a-icon
                        slot="unCheckedChildren"
                        type="close"
                      />
                    </a-switch>
                  </div>
                </template>

              </a-table>
              <a-row style="margin-top:10px">
                <a-col
                  :span="16"
                  :offset="18"
                  class="info-action"
                >
                  <a-button @click="reset">
                    取消
                  </a-button>
                  <a-button
                    :style="{ marginLeft: '8px' }"
                    type="primary"
                    html-type="submit"
                  >
                    保存
                  </a-button>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import { pattern } from '@api/pattern/index'
const brandList = ['JNBY', 'CROQUIS', '童装', '婴童', 'LESS', '蓬马', 'APN 73', 'JNBY HOME','校服']
const columns = [
  {
    title: '字段名称',
    dataIndex: 'fieldName',
  },
  {
    title: '是否主页显示',
    dataIndex: 'mainPage',
    scopedSlots: { customRender: 'main' },
  },
  {
    title: '是否详情页显示',
    dataIndex: 'detailPage',
    scopedSlots: { customRender: 'detail' },
  },
  {
    title: '是否打印页显示',
    dataIndex: 'printPage',
    scopedSlots: { customRender: 'print' },
  },
]
export default {
  props: {
    account: {
      type: Object,
      default: null,
    },
  },

  data() {
    return {
      columns,
      urlKey: 'account',
      id: '',
      fieldConfigList: [],
      ischoose: 1,
      noChoose: 0,
      brandList,
      roleName: '',
      templateId: '',
      roleList: [],
      seasonList: [],
      fieldList: [],
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xl: { span: 8 },
          xs: { span: 12 },
          sm: { span: 12 },
        },
      },
      // pagination: {
      //   total: 0,
      //   current: 1,
      //   pageSize: 10,
      //   pageSizeOptions: ['10', '20', '30', '40'],
      //   showQuickJumper: true,
      //   showSizeChanger: true,
      //   showTotal: (total) => `共 ${total} 条记录`,
      //   itemRender: (current, type, originalElement) => {
      //     if (type === 'prev') {
      //       return <a>上一页</a>
      //     } else if (type === 'next') {
      //       return <a>下一页</a>
      //     }
      //     return originalElement
      //   },
      // },
      patt: 'api/gateway/basemgt-op/',
      loading: true,
      form: this.$form.createForm(this),
      showTable: false,
    }
  },

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'account', roleId: 'account', brand: 'account', mainPage: 'account', goodsSeason: 'account', printPage: 'account', detailPage: 'account' })
  },

  created() {
    const { account } = this.$props
    if (account) {
      this.formTile = '编辑'
      this.templateId = account.id
      this.$nextTick(() => {
        this.form.setFieldsValue({
          name: account.name,
          brandList: account.brandList,
          goodsSeason: account.goodsSeason,
          mainPage: account.fieldConfigList.mainPage,
          printPage: account.fieldConfigList.printPage,
          detailPage: account.fieldConfigList.detailPage,
        })
      })
      this.roleName = account.roleName
    } else {
      this.formTile = '新增'
      this.showTable = true
    }
  },
  mounted() {
    this.getRoleList()
    this.getSeasonList()
    if (this.showTable) {
      this.getFieldList()
    } else {
      this.getTableList()
    }
  },
  methods: {
    reset() {
      this.form.resetFields()
      this.$emit('close')
    },
    getTableList() {
      const params = {
        templateId: this.templateId,
      }
      postAction(`${this.patt}/template/info`, params).then((data) => {
        if (data.code == 200) {
          this.fieldConfigList = data.data.fieldConfigList
        } else {
          this.$message.warning(data.msg)
        }
      })
      this.loading = false
    },
    getRoleList() {
      const params = {}
      postAction(`${this.patt}/role/list`, params).then((data) => {
        if (data.code == 200) {
          this.roleList = data.data.records
          this.roleList.map((item) => {
            if (item.name === this.roleName) {
              this.form.setFieldsValue({ roleId: item.id })
            }
          })
        } else {
          this.$message.warning(data.msg)
        }
        this.loading = false
      })
    },
    getSeasonList() {
      getAction(`${this.patt}/config/goodsSeason`).then((data) => {
        if (data.code == 200) {
          this.seasonList = data.data
        } else {
          this.$message.warning(data.msg)
        }
        this.loading = false
      })
    },
    getFieldList() {
      const params = {}
      postAction(`${this.patt}/field/page`, params).then((data) => {
        if (data.code == 200) {
          data.data.records.map((item) => {
            this.fieldList.push({
              fieldId: item.id,
              fieldName: item.fieldName,
              mainPage: 0,
              detailPage: 0,
              printPage: 0,
            })
          })
          console.log(this.fieldList)
          this.fieldConfigList = this.fieldList
        } else {
          this.$message.warning(data.msg)
        }
        this.loading = false
      })
    },
    choose(record, type, operation) {
      if (operation == 1) {
        this.fieldConfigList.map((item) => {
          if (item.fieldId == record.fieldId) {
            item.mainPage = type
            return
          }
        })
      }
      if (operation == 2) {
        this.fieldConfigList.map((item) => {
          if (item.fieldId == record.fieldId) {
            item.detailPage = type
            return
          }
        })
      }
      if (operation == 3) {
        this.fieldConfigList.map((item) => {
          if (item.fieldId == record.fieldId) {
            item.printPage = type
            return
          }
        })
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
          console.log(values)
        }
      })
    },
    submit(values) {
      var params = {
        brandList: values.brandList,
        goodsSeason: values.goodsSeason,
        name: values.name,
        roleId: values.roleId,
        fieldConfigList: this.fieldConfigList,
      }
      if (this.templateId) {
        params.templateId = this.templateId
      }
      const api = this.showTable ? `${this.patt}template/save` : `${this.patt}template/update`
      this.$http({
        url: api,
        method: 'post',
        data: params,
      }).then((data) => {
        if (data.code == 200) {
          this.$message.success(this.showTable ? '新建帐号成功！' : '修改成功！')
          this.reset()
        } else {
          this.$message.warning(data.msg)
        }
      })
    },
  },
}
</script>


